﻿@using Common.BaseLibrary.Authorization
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@model List<DepartmentWork.Model.MenuViewModel>
<link href="~/Assets/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" />
<script src="~/Assets/plugins/bootstrap-select/bootstrap-select.min.js"></script>

<link href="~/Assets/plugins/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet" />
<link href="~/Assets/plugins/bootstrap-datepicker/css/datepicker-theme.css" rel="stylesheet" />
<script src="~/Assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="~/Assets/plugins/chosen/chosen.jquery.min.js"></script>
<script src="~/Assets/js/pages/form-elements.js"></script>
<style>
    .btn-default {
        color: #333;
        background-color: #FFF;
        border-color: #CCC;
        height: 34px;
    }
</style>

<script>

    function DelMenu(menuId)
    {
        if (!confirm("请确认是否删除该菜单？"))
        {
            return false;
        }
        window.location.href = '@Url.Action("DelMenu", "Menu", new { area = "SystemSettingArea" })' + '?menuId=' + menuId;
    }



    function ShowParent(index)
    {
        if ($("#treeview li[data-nodeid='" + index + "']").css('display') == 'block')
        {
            $("#treeview li[data-nodeid='" + index + "']").hide(300);
            $("#span_" + index).attr('class', 'icon expand-icon glyphicon glyphicon-plus');
        }
        else
        {
            $("#treeview li[data-nodeid='" + index + "']").show(300);
            $("#span_" + index).attr('class', 'icon expand-icon glyphicon glyphicon-minus');
        }

    }
</script>

<div class="page-header">
    <div class="pull-left">
        <ol class="breadcrumb visible-sm visible-md visible-lg">
            <li><a href="@Url.Action("Index","Home",new{area=""})"><i class="icon fa fa-home"></i>主页</a></li>
            <li><a href="#"><i class="fa fa-envelope"></i>系统设置</a></li>
            <li class="active"><a href="#"><i class="fa fa-envelope"></i>菜单管理</a></li>
        </ol>
    </div>
</div>


@{
    if (ViewBag.Flag == "CreateTrue")
    {
    <div class="alert alert-success">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>&emsp;菜单添加成功！</strong>
    </div>
    }
    if (ViewBag.Flag == "CreateFalse")
    {
    <div class="alert alert-danger">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>&emsp;菜单添加失败！</strong> @ViewBag.Info
    </div>
    }

    if (ViewBag.Flag == "EditTrue")
    {
    <div class="alert alert-success">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>&emsp;菜单编辑成功！</strong>
    </div>
    }
    if (ViewBag.Flag == "EditFalse")
    {
    <div class="alert alert-danger">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>&emsp;菜单辑失败！</strong> @ViewBag.Info
    </div>
    }

    if (ViewBag.Flag == "DelTrue")
    {
    <div class="alert alert-success">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>&emsp;菜单删除成功！</strong>
    </div>
    }
    if (ViewBag.Flag == "DelFalse")
    {
    <div class="alert alert-danger">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>&emsp;菜单删除失败！</strong> @ViewBag.Info
    </div>
    }
}


<script>
    function ShowMenuInfo(menuId)
    {
        $("#div_CreateMenu").css("display", "none");
        $("#div_EditMenu").css("display", "block");

        $.ajax({
            type: "POST",
            //url: "/KSManager/SystemSettingArea/Menu/GetMenuInfo",
            url:'@Url.Action("GetMenuInfo","Menu",new{area="SystemSettingArea"})',
            data: "menuId=" + menuId,
            error: function () { alert("服务器出错！"); },
            success: function (data)
            {
                $("#hid_EditMenuId").val(data["MENU_ID"]);
                $("#tb_EditMenuTitle").val(data["MENU_NAME"]);
                $("#tb_EditMenuAreaName").val(data["AREA_NAME"]);
                $("#tb_EditMenuActionName").val(data["ACTION_NAME"]);
                $("#tb_EditMenuControllerName").val(data["CONTROLLER_NAME"]);
                $("#tb_EditMenuContext").val(data["MENU_CONTEXT"]);

                $("#select_EditMenuBoot option").each(function ()
                {
                    if ($(this).val() == data["BOOT_MENU_ID"])
                    {
                        $(this).attr("selected", "selected");
                    }
                });

                if (data["BOOT_MENU_ID"] == 0)
                {
                    //alert('a');
                    $("#select_EditMenuIcon").removeAttr("disabled");
                    $("#select_EditMenuIcon option").each(function ()
                    {
                        if ($(this).val() == data["MENU_CLASS"])
                        {
                            $(this).attr("selected", "selected");
                        }
                    });
                }
                else
                {
                    $("#select_EditMenuIcon").attr("disabled", "disabled");
                }


                if (data["MENU_STATUS"] == 0)
                {
                    $("#tb_EditMenuStatue").attr("checked", "checked");
                } else
                {
                    $("#tb_EditMenuStatue").attr("checked", "");
                }

            }
        });

    }
</script>

<div class="col-md-5 col-xs-12" id="div_ShowMenu" style="width: 50%">
    <div class="panel bk-widget bk-border-off bk-noradius">
        <div class="panel">
            <div class="panel-heading bk-bg-primary">
                <h6><i class="fa fa-table red"></i><span class="break"></span>菜单列表</h6>
            </div>
            <div class="panel-body">
                <div id="treeview" class="treeview">
                    <ul id="ul_user" class="list-group">
                        @*                
                <li class="list-group-item node-treeview" data-nodeid="0">
                    <!-- 节点合并样式为 glyphicon-plus 展开样式为： glyphicon-minus-->
                    <span class="icon expand-icon glyphicon glyphicon-plus"></span>
                    <span class="icon node-icon"></span>
                    软件科 一级节点 节点 合并
                    <span class="badge">3 child elements</span>
                </li>*@
                        <!-- class中 加 ‘node-selected’ 代表 选中 ，选中后改变样式 style="color:#FFFFFF;background-color:#428bca;"-->
                        @{
                            var list = this.Model.FindAll(r => r.BOOT_MENU_ID == 0).ToList();//获取所有根节点菜单
                            for (int i = 0; i < list.Count(); i++)
                            {
                                var item = list[i];

                                if (item.CHILDEN_COUNT == 0)
                                {
                                    <li class="list-group-item node-treeview" onclick="ShowParent(-1)" >
                                        <span id="" class="icon expand-icon glyphicon glyphicon-minus"></span>
                                        <span class="@item.MENU_CLASS"></span>
                                        @item.MENU_NAME
                                         <span class="badge">
                                            <a onclick="ShowMenuInfo('@item.MENU_ID')">编辑</a>
                                        </span>
                                        <span class="badge">
                                            <a onclick="DelMenu('@item.MENU_ID')">删除</a>
                                        </span>
                                    </li>
                                }
                                else
                                {
                            <li class="list-group-item node-treeview" onclick="ShowParent(@item.MENU_ID)">
                                <span id="span_@item.MENU_ID" class="icon expand-icon glyphicon glyphicon-minus"></span>
                                <span class="@item.MENU_CLASS"></span>
                                @item.MENU_NAME
                                <span class="badge">
                                            <a onclick="ShowMenuInfo('@item.MENU_ID')">编辑</a>
                                        </span>
                            </li>
                                    for (int j = 0; j < this.Model.Count(); j++)
                                    {
                                        if (this.Model[j].BOOT_MENU_ID == item.MENU_ID)
                                        {
                            <li ondblclick="ShowMenuInfo('@this.Model[j].MENU_ID')" class="list-group-item node-treeview" data-nodeid="@this.Model[j].BOOT_MENU_ID">
                                <span class="indent"></span>
                                <span class="icon"></span>
                                <span class=""></span>&emsp;&emsp;
                                                @this.Model[j].MENU_NAME
                                <span class="badge">
                                    <a onclick="DelMenu('@this.Model[j].MENU_ID')">删除</a>
                                </span>
                            </li> 
                                        }
                                    }
                                }

                            }
                        }
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function ShowCreateMenu()
    {
        $("#div_CreateMenu").css("display", "block");
        $("#div_EditMenu").css("display", "none");
    }
</script>

<div class="col-md-7 col-xs-12" id="div_ControlMenu" style="width: 50%;float:right;height: 900px">
    <div class="panel bk-widget bk-border-off bk-noradius" style="height: 900px">
        <div class="panel" style="height: 800px">
            <div class="panel-heading bk-bg-primary">
                <h6><i class="fa fa-table red"></i><span class="break"></span>菜单操作</h6>
                <div class="panel-actions">
                    <a onclick="ShowCreateMenu()" class="bk-margin-5 btn btn-default  btn-sm" style="background-color: #ECEDF0">&nbsp;&nbsp;新增菜单&nbsp;&nbsp;</a>
                </div>
            </div>

            <div class="panel-body" id="div_CreateMenu" style="display: none">
                <form method="POST" id="frm_CreateMenu" action="@Url.Action("CreateMenu","Menu",new{area="SystemSettingArea"})">
                    <div class="modal-body" style="font-size: small">
                        <div class="row">
                            <label class="col-md-3 control-label" for="text-input">菜单名称：</label>
                            <div class="col-md-9">
                                <input type="text" id="tb_CreateMenuTitle" style="height: 34px" name="tb_CreateMenuTitle" class="form-control" />
                                 <span style="color: red" id="span_CreateMenuTitle"></span>
                            </div>
                        </div>
                        <br />
                        <div class="row">
                            <label class="col-md-3 control-label" for="text-input">菜单描述：</label>
                            <div class="col-md-9">
                                <textarea id="tb_CreateMenuContext" name="tb_CreateMenuContext" class="form-control" rows="3"></textarea>
                                 <span style="color: red" id="span_CreateMenuContext"></span>
                            </div>
                        </div>
                        <br />
                        <div class="row">
                            <label class="col-md-3 control-label" for="text-input">区域名：</label>
                            <div class="col-md-9">
                                <input type="text" id="tb_CreateMenuAreaName" style="height: 34px" name="tb_CreateMenuAreaName" class="form-control" />
                            </div>
                        </div>
                        <br />
                        <div class="row">
                            <label class="col-md-3 control-label" for="text-input">控制器名：</label>
                            <div class="col-md-9">
                                <input type="text" id="tb_CreateMenuControllerName" style="height: 34px" name="tb_CreateMenuControllerName" class="form-control" />
                               
                            </div>
                        </div>
                        <br />
                        <div class="row">
                            <label class="col-md-3 control-label" for="text-input">方法名：</label>
                            <div class="col-md-9">
                                <input type="text" id="tb_CreateMenuActionName" name="tb_CreateMenuActionName" class="form-control" />
                            </div>
                        </div>
                        <br />

                        <div class="row">
                            <label class="col-md-3 control-label" for="text-input">上级菜单：</label>
                            <div class="col-md-9">
                                <select name="select_CreateMenuBoot" style="height: 34px" id="select_CreateMenuBoot" class="form-control selectpicker">
                                   
                                    @{
                                        for (int i = 0; i < this.Model.FindAll(r => r.BOOT_MENU_ID == 0).Count; i++)
                                        {
                                            var item = this.Model[i];
                                            <option value="@item.MENU_ID" class="">&ensp; @item.MENU_NAME</option>
                                        }
                                    }
                                     <option value="0" class="">&ensp; 根节点</option>
                                </select>
                            </div>
                        </div>
                        <br />

                        <div class="row">
                            <label class="col-md-3 control-label" for="text-input">图标：</label>
                            <div class="col-md-9">
                                <select name="select_CreateMenuIcon" style="height: 34px" id="select_CreateMenuIcon" class="form-control selectpicker">
                                    <option value="" class="">&ensp;请选择</option>
                                    <option value="glyphicon glyphicon-home" class="glyphicon glyphicon-home">&ensp; 图标1</option>
                                    <option value="fa fa-envelope" class="fa fa-envelope">&emsp;图标2</option>
                                    <option value="fa fa-thumb-tack" class="fa fa-thumb-tack">&emsp;图标3</option>
                                    <option value="fa fa-envelope" class="fa fa-envelope">&emsp;图标4</option>
                                    <option value="fa fa-search" class="fa fa-search">&emsp;图标5</option>
                                    <option value="fa fa-magic" class="fa fa-magic">&emsp;图标6</option>
                                    <option value="fa fa-hospital-o" class="fa fa-hospital-o">&emsp;图标7</option>
                                    <option value="glyphicon glyphicon-cloud-download" class="glyphicon glyphicon-cloud-download">&emsp;图标8</option>
                                    <option value="glyphicon glyphicon-user" class="glyphicon glyphicon-user">&emsp;图标9</option>
                                    <option value="glyphicon glyphicon-th-large" class="glyphicon glyphicon-th-large">&emsp;图标10</option>
                                    <option value="fa fa-table red" class="fa fa-table red">&emsp;图标11</option>
                                </select>
                            </div>
                        </div>
                        <br />
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                关闭
                            </button>
                            <input type="button" onclick="SubmitCreateMenu()" value="新增" class="btn btn-primary" />
                        </div>
                    </div>
                </form>
                <script>
                    function SubmitCreateMenu()
                    {
                        if ($("#tb_CreateMenuTitle").val() == "") {
                            $("#span_CreateMenuTitle").text("*");
                            return false;
                        } 
                        if ($("#tb_CreateMenuContext").val() == "")
                        {
                            $("#span_CreateMenuContext").text("*");
                            return false;
                        }
                        $("#frm_CreateMenu").submit();
                    }
                </script>

            </div>

            <div class="panel-body" id="div_EditMenu" style="display: none">
                <form method="POST" action="@Url.Action("EditMenu")">
                <div class="modal-body" style="font-size: small">
                    <input type="hidden" name="hid_EditMenuId" id="hid_EditMenuId" />
                    <div class="row">
                        <label class="col-md-3 control-label" for="text-input">菜单名称：</label>
                        <div class="col-md-9">
                            <input type="text" id="tb_EditMenuTitle" style="height: 34px" name="tb_EditMenuTitle" class="form-control" />
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <label class="col-md-3 control-label" for="text-input">菜单描述：</label>
                        <div class="col-md-9">
                            <textarea id="tb_EditMenuContext" name="tb_EditMenuContext" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <label class="col-md-3 control-label" for="text-input">区域名：</label>
                        <div class="col-md-9">
                            <input type="text" id="tb_EditMenuAreaName" style="height: 34px" name="tb_EditMenuAreaName" class="form-control" />
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <label class="col-md-3 control-label" for="text-input">控制器名：</label>
                        <div class="col-md-9">
                            <input type="text" id="tb_EditMenuControllerName" style="height: 34px" name="tb_EditMenuControllerName" class="form-control" />
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <label class="col-md-3 control-label" for="text-input">方法名：</label>
                        <div class="col-md-9">
                            <input type="text" id="tb_EditMenuActionName" name="tb_EditMenuActionName" class="form-control" />
                        </div>
                    </div>
                    <br />

                    <div class="row">
                        <label class="col-md-3 control-label" for="text-input">上级菜单：</label>
                        <div class="col-md-9">
                            <select name="select_EditMenuBoot" style="height: 34px" id="select_EditMenuBoot" class="form-control selectpicker">
                                @{
                                    for (int i = 0; i < this.Model.FindAll(r => r.BOOT_MENU_ID == 0).Count; i++)
                                    {
                                        var item = this.Model[i];
                                        <option value="@item.MENU_ID" class="">&ensp; @item.MENU_NAME</option>
                                    }
                                }
                            </select>
                        </div>
                    </div>
                    <br />

                    <div class="row">
                        <label class="col-md-3 control-label" for="text-input">图标：</label>
                        <div class="col-md-9">
                            <select name="select_EditMenuIcon" style="height: 34px" id="select_EditMenuIcon" class="form-control selectpicker">
                                <option value="glyphicon glyphicon-home" class="glyphicon glyphicon-home">&ensp; 图标1</option>
                                <option value="fa fa-envelope" class="fa fa-envelope">&emsp;图标2</option>
                                <option value="fa fa-thumb-tack" class="fa fa-thumb-tack">&emsp;图标3</option>
                                <option value="fa fa-envelope" class="fa fa-sun-o">&emsp;图标4</option>
                                <option value="fa fa-search" class="fa fa-search">&emsp;图标5</option>
                                <option value="fa fa-magic" class="fa fa-magic">&emsp;图标6</option>
                                <option value="fa fa-hospital-o" class="fa fa-hospital-o">&emsp;图标7</option>
                                <option value="glyphicon glyphicon-cloud-download" class="glyphicon glyphicon-cloud-download">&emsp;图标8</option>
                                <option value="glyphicon glyphicon-user" class="glyphicon glyphicon-user">&emsp;图标9</option>
                                <option value="glyphicon glyphicon-th-large" class="glyphicon glyphicon-th-large">&emsp;图标10</option>
                                <option value="fa fa-table red" class="fa fa-table red">&emsp;图标11</option>
                            </select>
                        </div>
                    </div>
                    <br />

                    <div class="row">
                        <label class="col-md-3 control-label" for="text-input">菜单状态：</label>
                        <div class="col-md-9">
                            <input id="tb_EditMenuStatue" name="tb_EditMenuStatue" value="0" type="checkbox" />
                            <label for="tb_EditMenuStatue">是否启用</label>
                        </div>
                    </div>
                    <br />

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            关闭
                        </button>
                        <input type="submit" value="提交更改" class="btn btn-primary" />
                    </div>
                </div>
                </form>
            </div>


        </div>
    </div>
</div>
